<!DOCTYPE html>


  <html class="light page-post">


<head>
  <meta charset="utf-8">
  
  <title>gulp 前端自动化工具 | watermeLonMan frontEnd 前端 javascript js node vue php</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="gulp 前端自动化工具 gulp配置方法 gulp安装教程," />
  

  <meta name="description" content="gulp 前端自动化构建工具配置方法
gulp 基于node环境，如果本地没有安装，请前往Node官网下载安装


安装gulp
首先全局安装
1$ npm install gulp -g

新建项目，并且本地安装
12$ npm init #初始化package.json文件(如果不懂具体配置什么意思，一路回车就好)$ npm install gulp --save

新建gulpfile.js">
<meta property="og:type" content="article">
<meta property="og:title" content="gulp 前端自动化工具">
<meta property="og:url" content="http://git.oschina.net/WatermeLonMan/2016/11/07/gulp/index.html">
<meta property="og:site_name" content="watermeLonMan frontEnd 前端 javascript js node vue php">
<meta property="og:description" content="gulp 前端自动化构建工具配置方法
gulp 基于node环境，如果本地没有安装，请前往Node官网下载安装


安装gulp
首先全局安装
1$ npm install gulp -g

新建项目，并且本地安装
12$ npm init #初始化package.json文件(如果不懂具体配置什么意思，一路回车就好)$ npm install gulp --save

新建gulpfile.js">
<meta property="og:updated_time" content="2017-04-12T15:35:20.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="gulp 前端自动化工具">
<meta name="twitter:description" content="gulp 前端自动化构建工具配置方法
gulp 基于node环境，如果本地没有安装，请前往Node官网下载安装


安装gulp
首先全局安装
1$ npm install gulp -g

新建项目，并且本地安装
12$ npm init #初始化package.json文件(如果不懂具体配置什么意思，一路回车就好)$ npm install gulp --save

新建gulpfile.js">

  

  
    <link rel="icon" href="/images/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbe6" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/person_style.css">
  

  
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-97407478-1', 'auto');
ga('send', 'pageview');

</script>
<!-- End Google Analytics -->


  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?0dfdf78e5f8c57b73f38865645af83e8";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  

  
</head>

<body>


  
    <span id="toolbox-mobile" class="toolbox-mobile">more</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">more</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/category/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tag/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#gulp-前端自动化构建工具配置方法"><span class="toc-text">gulp 前端自动化构建工具配置方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#安装gulp"><span class="toc-text">安装gulp</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#常用的api介绍"><span class="toc-text">常用的api介绍</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#常用插件安装使用"><span class="toc-text">常用插件安装使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#gulp-clean-清空文件"><span class="toc-text">gulp-clean 清空文件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#gulp-rename-重命名文件"><span class="toc-text">gulp-rename 重命名文件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#gulp-uglify-混肴js"><span class="toc-text">gulp-uglify 混肴js</span></a></li></ol></li></ol>
  </div>



<div class="content content-post CENTER">
   <article id="post-gulp" class="article article-type-post" itemprop="blogPost">
  <header class="article-header">
    <h1 class="post-title">gulp 前端自动化工具</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.11.07</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>watermeLonMan</span>
        </span>
      

      


      

      

      
      
    </div>
  </header>

  <div class="article-content">
    
      <h3 id="gulp-前端自动化构建工具配置方法"><a href="#gulp-前端自动化构建工具配置方法" class="headerlink" title="gulp 前端自动化构建工具配置方法"></a>gulp 前端自动化构建工具配置方法</h3><ul>
<li>gulp 基于node环境，如果本地没有安装，请前往<a href="http://nodejs.cn/" target="_blank" rel="external">Node</a>官网下载安装</li>
<li></li>
</ul>
<h3 id="安装gulp"><a href="#安装gulp" class="headerlink" title="安装gulp"></a>安装gulp</h3><ul>
<li><p>首先全局安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ npm install gulp -g</div></pre></td></tr></table></figure>
</li>
<li><p>新建项目，并且本地安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$ npm init <span class="comment">#初始化package.json文件(如果不懂具体配置什么意思，一路回车就好)</span></div><div class="line">$ npm install gulp --save</div></pre></td></tr></table></figure>
</li>
<li><p>新建gulpfile.js，作为项目的主文件</p>
</li>
</ul>
<h3 id="常用的api介绍"><a href="#常用的api介绍" class="headerlink" title="常用的api介绍"></a>常用的api介绍</h3><ol>
<li><p>gulp.src()<br>gulp模块的src方法，用于产生数据流。它的参数表示所要处理的文件，这些指定的文件会转换成数据流。参数的写法一般有以下几种形式。</p>
 <figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">gulp.dest(<span class="string">'./src'</span>) <span class="comment">#初始文件路径</span></div></pre></td></tr></table></figure>
</li>
<li><p>gulp.dest()<br>dest方法将管道的输出写入文件，同时将这些输出继续输出，所以可以依次 调用多次dest方法，将输出写入多个目录。如果有目录不存在，将会被新建。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">gulp.dest(<span class="string">'./build'</span>) <span class="comment">#处理后文件路径</span></div></pre></td></tr></table></figure>
</li>
<li><p>gulp.task()<br>task方法用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。下面是一个非常简单的任务函数。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">gulp.task(<span class="string">'greet'</span>, <span class="function"><span class="title">function</span></span> () &#123;</div><div class="line">  console.log(<span class="string">'Hello world!'</span>);</div><div class="line">&#125;); <span class="comment">#调用 gulp greet</span></div></pre></td></tr></table></figure>
<p>如果一个任务的名字为default，就表明它是“默认任务”，在命令行直接输入gulp命令，就会运行该任务。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'styles'</span>, <span class="string">'jshint'</span>, <span class="string">'watch'</span>]);<span class="comment"># 输入gulp 则执行 styles，jshint，watch等任务</span></div></pre></td></tr></table></figure>
</li>
<li><p>gulp.watch()<br>watch方法用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">gulp.task(<span class="string">'watch'</span>, <span class="function"><span class="title">function</span></span> () &#123;</div><div class="line">  gulp.watch(<span class="string">'templates/*.tmpl.html'</span>, [<span class="string">'build'</span>]);</div><div class="line">&#125;);<span class="comment">#上面代码指定，一旦templates目录中的模板文件发生变化，就运行build任务。</span></div></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="常用插件安装使用"><a href="#常用插件安装使用" class="headerlink" title="常用插件安装使用"></a>常用插件安装使用</h3><h4 id="gulp-clean-清空文件"><a href="#gulp-clean-清空文件" class="headerlink" title="gulp-clean 清空文件"></a>gulp-clean 清空文件</h4><ul>
<li>exapmle<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">gulp.task(<span class="string">'clean'</span>,<span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">  gulp.src(<span class="string">'build/*'</span>)</div><div class="line">   .pipe(clean())<span class="comment">#清空build中的文件</span></div><div class="line">   .pipe(notify(<span class="string">'build 清空完成'</span>));</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="gulp-rename-重命名文件"><a href="#gulp-rename-重命名文件" class="headerlink" title="gulp-rename 重命名文件"></a>gulp-rename 重命名文件</h4><ul>
<li>example <figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">gulp.task(<span class="string">'clean'</span>,<span class="function"><span class="title">function</span></span>()&#123;</div><div class="line">  gulp.src(<span class="string">'build/*'</span>)</div><div class="line">    .pipe(rename(&#123;suffix: <span class="string">'min'</span>&#125;))<span class="comment">#添加min</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
</li>
</ul>
<h4 id="gulp-uglify-混肴js"><a href="#gulp-uglify-混肴js" class="headerlink" title="gulp-uglify 混肴js"></a>gulp-uglify 混肴js</h4><ul>
<li>example <figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">gulp.task(<span class="string">'minifyJs'</span>,<span class="function"><span class="title">function</span></span>()&#123;</div><div class="line"> gulp.src(<span class="string">'src/javascripts/*.js'</span>)</div><div class="line">     .pipe(jsHint())<span class="comment">#js语法校验</span></div><div class="line">     .pipe(plumber(&#123;</div><div class="line">       errorHandler: handleErrors</div><div class="line">     &#125;))<span class="comment">#错误处理</span></div><div class="line">     .pipe(jsHint.reporter(<span class="string">'default'</span>))</div><div class="line">     .pipe(babel())<span class="comment">#es转换</span></div><div class="line">     .pipe(rename(&#123; suffix: <span class="string">'.min'</span> &#125;))<span class="comment">#重命名</span></div><div class="line">     .pipe(uglify())<span class="comment">#混肴js</span></div><div class="line">     .pipe(gulp.dest(<span class="string">'build/javascripts'</span>))<span class="comment">#写入目的文件夹</span></div><div class="line">     .pipe(reload(&#123;stream:<span class="literal">true</span>&#125;))</div><div class="line">     .pipe(notify(<span class="string">'js 编译完成'</span>));<span class="comment">#通知</span></div><div class="line">&#125;);</div></pre></td></tr></table></figure>
</li>
</ul>

    
  </div>
</article>


   

   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/11/07/hello-hexo/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/12/06/express/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/category/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tag/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    




    

  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>

</body>
</html>
